<template>
  <div class="search-wrapper">
    <el-form 
      ref="form" 
      :model="form" 
      :label-width="labelWidth" 
      :inline="true"
    >
      <el-form-item
        v-for="(item, index) in searchData"
        :key="index"
        :label="item.label"
      >
        <component
          :is="item.name"
          ref="comp"
          :label="item.label"
          :value="item.defaultValue"
          :default-value="item.defaultValue"
          :default-time="item.defaultTime"
          :type="item.type"
          :range-separator="item.rangeSeparator"
          :start-placeholder="item.startPlaceholder"
          :end-placeholder="item.endPlaceholder"
          :placeholder="item.placeholder"
          :options="item.options"
          :field="item.field"
          :cssstyle="item.style"
          :disabled="item.disabled"
          :value-format="item.valueFormat"
          :filterable="item.filterable"
          :picker-options="item.pickerOptions"
          @click="searchClick"
        />
      </el-form-item>
      <el-form-item v-if="modeConditon">
        <el-popover
          placement="bottom-start"
          :width="popoverWidth"
          trigger="click"
        >
          <el-form-item
            v-for="(item, index) in conditionData"
            :key="index"
            :label="item.label"
          >
            <component
              :is="item.name"
              :label="item.label"
              :placeholder="item.placeholder"
              :value="item.defaultValue"
              :options="item.options"
              :field="item.field"
              :cssstyle="item.style"
              :disabled="item.disabled"
              :value-format="item.valueFormat"
              :filterable="item.filterable"
              @click="searchClick"
            />
          </el-form-item>
          <el-button slot="reference">
            更多条件
          </el-button>
        </el-popover>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Template from "./template";
export default {
  name: "Search",
  components: Template,
  props: {
    searchData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    conditionData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    modeConditon: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: "80px"
    },
    popoverWidth: {
      type: [String, Number],
      default: "500"
    }
  },
  data() {
    return {
      inlines: false,
      dialogVisible: false,
      form: {}
    };
  },
  methods: {
    searchClick(val) {
      this.form[val.field] = val.val;
      this.$emit("searchClick", val);
      this.$emit("searchChange", val);
    },
    // 如果使用popover展示，请删除click方法
    click() {
      this.dialogVisible = true;
    },
    // 清空
    empty(data) {
      if (data) {
        this.$refs.comp.forEach(item => {
          if (item.field === data.field) {
            item.input = data.value;
          }
        });
      } else {
        this.$refs.comp.forEach(item => {
          item.input = "";
        });
      }
    },
    // 搜索
    search() {
      return this.form;
    }
  }
};
</script>
